<template>
  <NConfigProvider :locale="zhCN" :theme-overrides="themeOverrides">
    <NMessageProvider>
      <Header />
      <main>
        <RouterView />
      </main>
      <Footer />
    </NMessageProvider>
  </NConfigProvider>
</template>

<script setup lang="ts">
import { NConfigProvider, zhCN, NMessageProvider } from "naive-ui";
import type { GlobalThemeOverrides } from "naive-ui";
import { RouterView } from "vue-router";
import { useCategoriserStore } from "@/stores/category";
import { useUserStore } from "@/stores/user";

import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";

const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: "#8685ef",
    primaryColorHover: "#8685ef",
    primaryColorPressed: "#e3e0f3",
  },
};

const categoriser = useCategoriserStore();

const user = useUserStore();

(async () => {
  await categoriser.getCategories();
  await user.getUserInfo();
})();
</script>

<style>
@import "@/assets/base.css";
</style>
